Estoy tratando de entender el propósito de componibles. Tengo un componible simple como este y estaba tratando de ver el estado de una tienda Pinia donde el watch no se activa:
import { ref, watch, computed } from "vue"; import { storeToRefs } from "pinia"; import useFlightsStore from "src/pinia/flights.js"; import usePassengersStore from "src/pinia/passengers.js"; export function useFlight() { const route = useRoute(); const modalStore = useModalStore(); const flightsStore = useFlightsStore(); const { selection } = storeToRefs(flightsStore); const passengersStore = usePassengersStore(); const { passengers, adults, children, infants } = storeToRefs(passengersStore); watch([adults, children, infants], (val) => console.log('value changes', val))Donde lo mismo en un componente Vue funciona como se esperaba.
Entonces, ¿no podemos ver valores dentro de componibles?
Creo que puedes ver valores dentro de componibles.
Pero, para ver un estado de pinia, tiene que estar dentro de una función de flecha:
watch(() => somePiniaState, (n) => console.log(n, " value changed"));
Es como mirar un objeto reactivo.
Creo que esto debería documentarse mejor. En la documentación de Pinia podemos leer cómo ver toda la tienda o cómo suscribirse a una tienda, pero no cómo ver una propiedad de un solo estado dentro de un componente o componible.
Además, los documentos son algo tímidos al explicar que puede ver una propiedad dentro de una tienda usando la forma setup() de describir una tienda.
Más sobre esto aquí: https://github.com/vuejs/pinia/discussions/794#discussioncomment-1643242
Este error también falla silenciosamente (o no se ejecuta), lo cual no es útil...
Necesitaba ver un atributo de estado específico en uno de mis componentes, pero no encontré mi caso de uso en la documentación oficial . Usé una mezcla entre un reloj y storeToRefs para hacerlo.
import { usePlaylistsStore } from '@/stores/playlists' import { storeToRefs } from 'pinia' export default { name: 'PlaylistDetail', setup() { const playlistsStore = usePlaylistsStore() const { selectedGenres } = storeToRefs(playlistsStore) return { selectedGenres } }, watch: { selectedGenres(newValue, oldValue) { // do something } } }